<template>
  <div class="app-container" v-if="show">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="下单日期" prop="dataDate">
        <el-date-picker
          key="daterange"
          v-model="rangeDate"
          type="daterange"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="{
            disabledDate: (time) =>
              !(
                time.getTime() >= Date.now() - 365 * 8.64e7 &&
                time.getTime() < Date.now() - 8.64e7
              ),
          }"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 240px"
          @change="handleChange"
          size="mini"
        />
      </el-form-item>
      <el-form-item label="" prop="brandName">
        <!-- <el-input
          v-model="queryParams.brand"
          placeholder="请输入品牌"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.brand"
          placeholder="选择品牌"
          clearable
          filterable
        >
          <el-option
            v-for="dict in dict.type.sys_product_pp"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="supplier">
        <!-- <el-input
          v-model="queryParams.supplier"
          placeholder="选择供应商"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.supplier"
          placeholder="选择供应商"
          clearable
          filterable
        >
          <el-option
            v-for="dict in dict.type.sys_product_coder"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="contractNumber">
        <el-input
          v-model="queryParams.contractNumber"
          placeholder="请输入合同号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="" prop="orderStatus">
        <!-- <el-input
          v-model="queryParams.orderStatus"
          placeholder="订单状态"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.orderStatus"
          placeholder="订单状态"
          clearable
          filterable
        >
          <el-option
            v-for="dict in orderStatusType"
            :key="dict"
            :label="dict"
            :value="dict"
          />
        </el-select>
      </el-form-item>

      <el-form-item class="flex_one tr">
        <el-button
          icon="el-icon-search"
          size="mini"
          type="primary"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
      <br />
      <el-form-item label="" prop="purchaseOrderNumber">
        <el-input
          v-model="queryParams.purchaseOrderNumber"
          placeholder="请输入采购单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="" prop="receiptStatus">
        <!-- <el-input
          v-model="queryParams.receiptStatus"
          placeholder="请输入"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.receiptStatus"
          placeholder="收货状态"
          clearable
          filterable
        >
          <el-option
            v-for="dict in receiptStatusType"
            :key="dict"
            :label="dict"
            :value="dict"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="" prop="spu">
        <el-select
          v-model="queryParams.spu"
          clearable
          filterable
          remote
          :remote-method="getData"
          :loading="loading"
          placeholder="产品款号"
        >
          <el-option
            v-for="item in productNooptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="" prop="isoverorder">
        <el-select
          v-model="queryParams.isoverorder"
          placeholder="请选择是否超入"
          clearable
          filterable
        >
          <el-option
            v-for="dict in isoverorderType"
            :key="dict"
            :label="dict"
            :value="dict"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="isOverdue30Days">
        <el-select
          v-model="queryParams.isOverdue30Days"
          placeholder="是否准交"
          clearable
          filterable
        >
          <el-option
            v-for="dict in isoverorderType"
            :key="dict"
            :label="dict"
            :value="dict"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="" prop="firstLevelList">
        <el-select
          v-model="queryParams.firstLevelList"
          placeholder="请选择一级类目"
          clearable
          multiple
          style="width: 150px"
          @change="getsecondaryList"
        >
          <el-option
            v-for="dict in dict.type.sys_product_pl"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="secondLevelList">
        <el-select
          v-model="queryParams.secondLevelList"
          multiple
          placeholder="请选择二级类目"
          clearable
          filterable
          style="width: 150px"
          @change="getthreeLevelColumnList"
        >
          <el-option
            v-for="dict in secondaryList"
            :key="dict"
            :label="dict"
            :value="dict"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="threeLevelList">
        <el-select
          v-model="queryParams.threeLevelList"
          multiple
          placeholder="请选择三级类目"
          clearable
          filterable
          style="width: 150px"
        >
          <el-option
            v-for="dict in threeLevelColumnList"
            :key="dict"
            :label="dict"
            :value="dict"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <!-- <el-form
      class="ry_form"
      v-show="showSearch"
      :inline="true"
      label-width="100px"
      :model="queryParams"
      ref="queryForm"
      size="medium"
    >
      <el-form-item label="类型" prop="panelType">
        <DictRadio
          v-model="queryParams.panelType"
          :radioData="dict.type.wms_inventory_panel_type"
          size="small"
          @change="handleQuery"
        ></DictRadio>
      </el-form-item>
      <el-form-item label="物料" prop="itemId">
        <item-select v-model="queryParams.itemId"></item-select>
      </el-form-item>
      <el-form-item label="仓库" prop="rackId">
        <wms-warehouse-cascader
          v-model="queryParams.place"
        ></wms-warehouse-cascader>
      </el-form-item>
      <el-form-item label="库存" prop="quantity">
        <number-range v-model="queryParams.quantityRange"></number-range>
      </el-form-item>
      <el-form-item class="flex_one tr">
        <el-button
          icon="el-icon-search"
          size="mini"
          type="primary"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form> -->
    <el-row class="mb8" :gutter="10">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出
        </el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        
      </el-col> -->
      <el-col :span="1.5">
        <el-button size="mini" plain icon="el-icon-upload" @click="daoru"
          >导入</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <!-- <component
      :is="currentComponent"
      @update="getList"
      :table-data="wmsInventoryList"
    ></component> -->
    <!-- <pagination
      v-show="total&gt;0"
      :limit.sync="pageReq.size"
      :page.sync="pageReq.page"
      :total="total"
      @pagination="getList"
    ></pagination> -->
    <el-table
      border
      style="width: 100%"
      :data="wmsInventoryList"
      :span-method="objectSpanMethod"
      header-cell-class-name="table-header"
      row-class-name="table-row-low"
      :height="620"
      @row-dblclick="t"
    >
      <el-table-column
        fixed
        width="120"
        label="下单日期"
        align="center"
        prop="dataDate"
      ></el-table-column>
      <el-table-column fixed label="品牌" align="center" prop="brand" />
      <el-table-column fixed label="供应商" align="center" prop="supplier" />
      <el-table-column
        fixed
        width="120"
        label="合同号"
        align="center"
        prop="contractNumber"
      />
      <el-table-column
        fixed
        label="采购单号"
        align="center"
        prop="purchaseOrderNumber"
      />
      <el-table-column
        width="120"
        fixed
        label="产品款号"
        align="center"
        prop="spu"
      />
      <el-table-column fixed label="颜色" align="center" prop="colorProperty" />

      <el-table-column align="center" prop="firstLevelColumn" label="一级类目">
      </el-table-column>
      <el-table-column align="center" prop="secondLevelColumn" label="二级类目">
      </el-table-column>
      <el-table-column align="center" prop="threeLevelColumn" label="三级类目">
      </el-table-column>
      <el-table-column label="新品/老品" align="center" prop="isNewProduct" />
      <el-table-column
        label="协议到货日期"
        align="center"
        prop="contractDeliveryDate"
        width="120"
      >
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.contractDeliveryDate, "{y}-{m}-{d}")
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="下单数量" align="center" prop="orderQuantity" />
      <el-table-column
        label="合同采购价(元)"
        align="center"
        prop="contractPurchasePrice"
      />
      <el-table-column
        label="合同采购金额(元)"
        align="center"
        prop="contractAmount"
      />
      <el-table-column label="是否含税" align="center" prop="isTaxIncluded" />

      <el-table-column
        label="单件附加费用(元)"
        align="center"
        prop="additionalCostPerUnit"
      />
      <el-table-column
        label="订单附加费用(元)"
        align="center"
        prop="orderAdditionalCost"
      />
      <el-table-column
        label="附加费用说明"
        align="center"
        prop="additionalCostDescription"
      >
        <template slot-scope="scope">
          <mypopover :popoverInput="scope.row.additionalCostDescription" />
        </template>
      </el-table-column>
      <el-table-column
        width="150"
        label="成本裸价(元)（含税）"
        align="center"
        prop="costPriceIncludingTax"
      />
      <el-table-column
        width="150"
        label="成本裸价(元)(不含税)"
        align="center"
        prop="costPriceExcludingTax"
      />
      <el-table-column
        label="已入库数量"
        align="center"
        prop="quantityReceived"
      />
      <el-table-column
        width="150"
        label="是否准交"
        align="center"
        prop="isOverdue30Days"
      >
        <template v-slot:header>
          <div>
            是否准交
            <span @click="handleClick('是否准交')">
              <handlepopover :popoverInput="popoverInput" />
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="协议日期内已交货数量"
        align="center"
        prop="overdueQuantity30Days"
        width="150"
      >
        <template v-slot:header>
          <div>
            协议日期内已交货数量
            <span @click="handleClick('协议日期内已交货数量')">
              <handlepopover :popoverInput="popoverInput" />
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="逾期未交付"
        align="center"
        prop="currentDelayQuantity"
      >
        <template v-slot:header>
          <div>
            逾期未交付
            <span @click="handleClick('逾期未交付')">
              <handlepopover :popoverInput="popoverInput" />
            </span>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="逾期己交货数"
        align="center"
        prop="overdueDeliveryQuantity"
      >
        <template v-slot:header>
          <div>
            逾期己交货数
            <span @click="handleClick('逾期己交货数')">
              <handlepopover :popoverInput="popoverInput" />
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="交付完成率 " align="center" prop="overdueRateStr">
        <template v-slot:header>
          <div>
            交付完成率
            <span @click="handleClick('交付完成率')">
              <handlepopover :popoverInput="popoverInput" />
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="收货状态" align="center" prop="receiptStatus" />
      <el-table-column label="订单状态" align="center" prop="orderStatus" />
      <!-- <el-table-column
        label="采购完结未交付数"
        align="center"
        prop="purUnDeliveryQuantity"
      />
      <el-table-column
        label="未完结待入库数量"
        align="center"
        prop="unFinishUnReceivedQuantity"
      /> -->
      <!-- <el-table-column
        label="超入库数量"
        align="center"
        prop="overOrderReceivedQuantity"
      /> -->
      <el-table-column label="是否有交货差异" align="center" prop="isOverOrder">
        <template v-slot:header>
          <div>
            是否有交货差异
            <span @click="handleClick('是否有交货差异')">
              <handlepopover :popoverInput="popoverInput" />
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="差异数量" align="center" prop="overOrderQuantity"
        ><template v-slot:header>
          <div>
            差异数量
            <span @click="handleClick('差异数量')">
              <handlepopover :popoverInput="popoverInput" />
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="交货天数" align="center" prop="deliveryDays" />
      <el-table-column
        label="是否在生产周期入库"
        align="center"
        prop="is_production_cycle"
      >
        <template slot-scope="scope">
          <div
            style="color: rgb(37, 137, 255); cursor: pointer"
            @click="toPurchaseCycleSkc(scope.row)"
          >
            {{ scope.row.is_production_cycle }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="款式备注" align="center" prop="colorremark" />
      <el-table-column label="采购备注" align="center" prop="phaseremark" />
      <!-- <el-table-column label="单件税金" align="center" prop="taxAmountPerUnit" /> -->
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      title="关联skc采购周期信息"
      :visible.sync="isOpenDwd"
      width="80%"
      v-if="isOpenDwd"
    >
      <PurchaseCycleSkc :query="this.row" />
    </el-dialog>

    <el-dialog
      :visible.sync="openremark"
      append-to-body
      title="备注"
      width="500px"
      v-if="openremark"
    >
      <el-form :model="formApply" label-width="100px">
        <el-form-item label="款式备注" prop="remark">
          <!-- <el-input v-model="formApply.remark" placeholder="申请理由" /> -->
          <el-input
            v-model="formApply.colorremark"
            placeholder="请输入款式备注"
          />
        </el-form-item>
        <el-form-item label="采购备注" prop="remark">
          <!-- <el-input v-model="formApply.remark" placeholder="申请理由" /> -->
          <el-input
            v-model="formApply.phaseremark"
            placeholder="请输入采购备注"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: 50px">
        <el-button type="primary" @click="handlepurchaseorderremark"
          >确 定</el-button
        >

        <el-button @click="cancelApply">取消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改产品二级信息对话框 :on-change="handleChange"-->
    <el-dialog
      title="导入"
      :visible.sync="dialogVisible"
      width="500px"
      append-to-body
      v-if="dialogVisible"
    >
      <el-form label-width="150px">
        <el-form-item label="导入模板下载" prop="file">
          <el-button size="mini" @click="downLoadFile">
            备注模板下载
          </el-button>
        </el-form-item>
        <el-form-item label="导入文件" prop="file">
          <el-upload
            ref="daoru"
            :action="Upload.url"
            :headers="Upload.headers"
            :limit="limit"
            :on-exceed="handleExceed"
            :on-success="handlePictureSuccessPic"
            :before-upload="beforeAvatarUpload"
            :on-preview="handlePictureCardPreview"
            :file-list="fileLi"
            :on-change="changeFile1"
          >
            <el-button size="mini">备注批量导入</el-button>
            <!-- <i class="el-icon-plus"></i> -->
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  listPurchaseBasicsDwd,
  getPurchaseBasicsDwd,
  delPurchaseBasicsDwd,
  addPurchaseBasicsDwd,
  updatePurchaseBasicsDwd,
  synData,
  selectConditionList,
  purchaseorderremark,
  listpurchaseorderremark,
} from "@/api/purchase/PurchaseBasicsDwd";
// import { listWmsInventory, exportWmsInventory } from "@/api/wms/inventory";
// import NumberRange from "@/components/NumberRange";
// import ItemSelect from "@/components/ItemSelect";
import PanelByItem from "@/views/purchase/inventory/component/PanelByItem.vue";
import PanelByItemType from "@/views/purchase/inventory/component/PanelByItemType.vue";
import PanelByWarehouse from "@/views/purchase/inventory/component/PanelByWarehouse.vue";
import PanelByArea from "@/views/purchase/inventory/component/PanelByArea.vue";
// import { isStarRepo } from "@/utils/is-star-plugin";
// import { mapGetters } from "vuex";
import { listBrandChannelShop, listAll } from "@/api/chart/brandChannelShop";
import { productNoLike, proFirstSecondThree } from "@/api/product/template";
import PurchaseCycleSkc from "@/views/purchase/PurchaseCycleSkc/select.vue";
//--------导入token
import { getToken } from "@/utils/auth";
import {
  listTemplate,
  getTemplate,
  delTemplate,
  addTemplate,
  updateTemplate,
} from "@/api/data/template";
export default {
  name: "WmsInventory",
  dicts: [
    "sys_product_qudao",
    "sys_one_zero",
    "sys_product_size",
    "sys_sample_sf",
    "sys_jst_sample_sf",
    "sys_product_pp",
    "sys_product_coder",
    "sys_product_secondary",
    "sys_product_cycle",
    "sys_product_pl",
  ],
  components: {
    PanelByArea,
    PanelByWarehouse,
    PanelByItemType,
    PanelByItem,
    PurchaseCycleSkc,
    // ItemSelect,
    // NumberRange,
  },
  // dicts: ["wms_inventory_panel_type"],
  data() {
    return {
      row: {},
      isOpenDwd: false,

      popoverInput: {},
      pjtUrl: process.env.VUE_APP_BASE_API,
      fileLi: [],
      file: "",
      dialogVisible: false,
      // 图片数量限制
      limit: 2,
      Upload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 图片上传的方法地址:
        url:
          process.env.VUE_APP_BASE_API +
          "/purchase/purchaseorderremark/importData",
      },

      threeLevelColumnList: [],
      secondaryList: [],
      orderStatusType: ["已确认", "完成"],
      isoverorderType: ["是", "否"],
      receiptStatusType: ["未入库", "部分入库", "全部入库"],
      openremark: false,
      formApply: {
        colorremark: "",
        phaseremark: "",
      },
      rangeDate: [],
      show: true,
      productNooptions: [],
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 库存表格数据
      wmsInventoryList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dataDate: null,
        brandName: null,
        supplier: null,
        contractNumber: null,
        sku: null,
        purchaseOrderNumber: null,
        isNewProduct: null,
        orderQuantity: null,
        contractPurchasePrice: null,
        contractAmount: null,
        isTaxIncluded: null,
        additionalCostPerUnit: null,
        orderAdditionalCost: null,
        additionalCostDescription: null,
        costPriceIncludingTax: null,
        costPriceExcludingTax: null,
        taxAmountPerUnit: null,
        contractDeliveryDate: null,
        quantityReceived: null,
        isOverdue30Days: null,
        overdueQuantity30Days: null,
        isOverOrder: null,
        overOrderQuantity: null,
        remarks: null,
        dataYear: null,
        dataMonth: null,
        startTime: null,
        endTime: null,
        contractType: "产品",
      },
      pageReq: {
        page: 1,
        size: 10,
      },
      // 表单参数
      form: {},
      columns: [],
      panelType: 5,
    };
  },
  created() {
    // const res = await isStarRepo(
    //   "zccbbg",
    //   "RuoYi-Mall",
    //   this.userId,
    //   "http://wms.ichengle.top/inventory",
    //   "ruoyi-mall-商城",
    //   "https://gitee.com/zccbbg/RuoYi-Mall"
    // );
    // this.show = res;
    // if (res) {
    //   this.getList();
    // }
    this.getList();
  },
  computed: {
    // ...mapGetters(["userId"]),
    currentComponent() {
      console.log(this.panelType);
      let type = parseInt(this.panelType);
      switch (type) {
        case 5:
          return "panel-by-warehouse";
        case 10:
          return "panel-by-area";
        case 20:
          return "panel-by-item-type";
        default:
          return "";
      }
    },
  },
  // @Excel(name = "采购单号")
  // private String purchaseOrderNumber;

  // /** 货号 */
  // @Excel(name = "货号")
  // private String spu;

  // /** 颜色 */
  // @Excel(name = "颜色")
  // private String color;
  methods: {
    toPurchaseCycleSkc(row) {
      this.row = {
        skc: row.skc,
        purchaseOrderNumber: row.purchaseOrderNumber,
      };
      this.isOpenDwd = true;
    },
    handleClick(type) {
      if (!type) {
        return;
      }
      this.popoverInput = {
        component: "purchase/inventory/index",
        property: type,
        path: "产品视角",
      };
      return;
    },
    downLoadFile() {
      let obj = {
        templateName: "采购单备注导入模板",
      };
      listTemplate(obj).then((response) => {
        window.location.href = this.pjtUrl + response.rows[0].templateUrl;
      });
    },
    getthreeLevelColumnList(key) {
      proFirstSecondThree({
        firstLevelList: this.queryParams.firstLevelList,
        secondLevelList: this.queryParams.secondLevelList,
        label: "三级",
      }).then((response) => {
        this.threeLevelColumnList = response;
      });
    },
    getsecondaryList(key) {
      proFirstSecondThree({
        firstLevelList: this.queryParams.firstLevelList,
        label: "二级",
      }).then((response) => {
        this.secondaryList = response;
      });
    },
    //双击
    t(row, column, cell, event) {
      console.log(JSON.stringify(row));
      if (!row.purchaseOrderNumber) {
        this.$modal.msgError("缺少采购单号");
        return;
      }
      if (!row.spu) {
        this.$modal.msgError("缺少货号");
        return;
      }
      if (!row.colorProperty) {
        this.$modal.msgError("缺少颜色");
        return;
      }
      this.formApply.purchaseOrderNumber = row.purchaseOrderNumber;
      this.formApply.spu = row.spu;
      this.formApply.color = row.colorProperty;
      this.formApply.colorremark = row.colorremark ? row.colorremark : "";
      this.formApply.phaseremark = row.phaseremark ? row.phaseremark : "";
      // listpurchaseorderremark(this.formApply).then((response) => {
      //   console.log(JSON.stringify(response));

      //   this.formApply = response.rows[0];
      // });
      this.openremark = true;
    },
    cancelApply() {
      this.openremark = false;
    },
    handlepurchaseorderremark() {
      purchaseorderremark(this.formApply).then((response) => {
        this.openremark = false;
        if (response.code == 200) {
          this.getList();
        }
      });
    },
    handleChange() {
      this.queryParams.startTime = this.rangeDate[0];
      this.queryParams.endTime = this.rangeDate[1];
      this.getList();
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载，请稍候！");
    },
    /** 查询库存列表 */
    getList() {
      this.openLoading();
      setTimeout(() => {
        selectConditionList(this.queryParams).then((response) => {
          this.$modal.closeLoading();
          this.wmsInventoryList = response.rows ? response.rows : [];
          this.total = response.total;
        });
      }, 1000); // 设置3秒钟后执行请求
    },

    /**
     * 合并行 - 书架
     */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // const { timetableBookVO } = this.detailData;
      const timetableBookVO = this.wmsInventoryList;
      const listMap = {};
      timetableBookVO.length &&
        timetableBookVO.forEach((item, index) => {
          if (listMap[item.dataDate]) {
            // len - 用于书架合并多少行
            listMap[item.dataDate].len += 1;
            // firstIndex - 用于同一个书架，最开始的书架进行合并，例如书架1，有3本书，则第一本书的书架1合并3行，后面都为0即可
            listMap[item.dataDate].firstIndex =
              listMap[item.dataDate].firstIndex < index
                ? listMap[item.dataDate].firstIndex
                : index;
          } else {
            listMap[item.dataDate] = { len: 1, firstIndex: index };
          }
        });
      if (columnIndex == 0) {
        if (
          listMap[row.dataDate] &&
          listMap[row.dataDate].firstIndex == rowIndex
        ) {
          return { rowspan: listMap[row.dataDate].len, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
    },
    /* 获取货号列表 */
    getData(key) {
      console.log(JSON.stringify(key));
      this.loading = true;
      // return
      productNoLike(key).then((res) => {
        this.loading = false;
        this.productNooptions = res.data;
        // console.log(JSON.stringify(this.options));
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        itemId: null,
        rackId: null,
        quantity: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      // this.pageReq.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.brand = "";
      this.queryParams.supplier = "";
      this.queryParams.contractNumber = "";
      this.rangeDate = [];
      this.handleQuery();
      // this.queryParams.brand = "";
      // this.queryParams.supplier = "";
      // this.queryParams.contractNumber = "";
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 导出按钮操作 */
    handleExport() {
      delete this.queryParams.pageNum;
      delete this.queryParams.pageSize;
      this.download(
        "purchase/PurchaseBasicsDwd/voExport",
        {
          ...this.queryParams,
        },
        `PurchaseBasicsDwd_${new Date().getTime()}.xlsx`
      );
    },

    //部门文件导入修改打开
    daoru() {
      this.dialogVisible = true;
    },
    // 打开加载层
    openUploadLoading() {
      this.$modal.loading("正在导入，请稍候！");
    },
    //文件导入成功回传

    handlePictureSuccessPic(res, file) {
      this.$refs.daoru.clearFiles(); //去掉文件列表
      this.$modal.closeLoading();
      console.log(JSON.stringify(res));
      //设置图片访问路径 （url 后台传过来的的上传地址）
      // this.picUrl = file.response.url;
      // const url = file.response.fileName;
      this.file = file.response.url;
      console.log(JSON.stringify(this.file));
      if (res.code == 200) {
        this.dialogVisible = false;

        this.$modal.msgSuccess(res.msg);
        // if (res.msg == "操作成功") {
        //   this.$modal.msgSuccess("导入成功");
        // } else {
        //   this.$modal.msgError(res.msg);
        // }
        this.getList();
        // return true
      } else {
        this.$modal.msgError(res.msg);
        this.dialogVisible = true;
        // this.$message.msgError('该颜色未在字典定义')
        return;
      }
    },
    //图片预览
    handlePictureCardPreview(file) {
      // this.picUrl = file.url
      // this.imageUrl = file.url;
      // this.dialogVisible = true;
    },
    //图片上传前的相关判断
    beforeAvatarUpload(file) {
      // const isJPG = file.type == 'image/jpeg' || file.type == 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 100;
      // if (!isJPG) {
      //     this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 100MB!");
      }
      this.openUploadLoading();
      return isLt2M;
    },

    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传链接文件数量不能超过 ${this.limit} 个!`);
    },
    // 上传文件让第二次覆盖第一的文件
    changeFile1(file, fileList) {
      if (fileList.length > 1) {
        this.fileLi = fileList.slice(-1);

        // this.fileList = [fileList[fileList.length - 1]]//这一步，是 展示最后一次选择文件
      }
      // this.fileSpecial = fileList;
    },
  },
};
</script>
<style lang="scss" scoped>
span.textname {
  // display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
.el-dialog-div {
  height: 80vh;
  overflow-x: hidden;
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}

// span.textname {
//   display: -webkit-box;

//   text-overflow: ellipsis;
//   overflow: hidden;
//   -webkit-line-clamp: 1;
//   -webkit-box-orient: vertical;
//   white-space: pre-wrap;
// }
</style>